<script lang="ts" setup>
import themeManager from '../util/theme_manager/index'

const props = defineProps<{
  num: string,
  sep?: string,
}>()

const n1 = ref('')
const n2 = ref('')

const _sep = !! props.sep ? props.sep : '.'
const sepIndex = props.num.indexOf(_sep)
n1.value = sepIndex > 0 ? props.num.slice(0, sepIndex) : props.num
n2.value = sepIndex > 0 ? props.num.slice(sepIndex) : ''

</script>

<template>
  <span>
    <span :style="{color: `${themeManager.getTheme().getColor(3)}`}">{{n1}}</span>
    <span :style="{color: `${themeManager.getTheme().getColor(3)}88`}">{{n2}}</span>
  </span>
</template>